<!-- 自营商品订单详情 -->
<template>
  <div class="proprietary-order-detail">
    <div class="proprietary-order-detail__header">
      <div class="proprietary-order-detail__header--title">订单详情</div>
      <el-button size="mini" type="primary" @click="$router.go(-1)">返回</el-button>
    </div>

    <div class="proprietary-order-detail__content">
      <div class="proprietary-order-detail__content--item">
        <div class="label">订单编号:</div>
        <div class="value">{{ orderItem.orderNo }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">订单状态：</div>
        <div class="value">{{ orderItem.orderStatusName }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">下单时间：</div>
        <div class="value">{{ orderItem.orderTime }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">订单来源：</div>
        <div class="value">{{ orderItem.orderSource }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">店铺名称：</div>
        <div class="value">{{ orderItem.storeName }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">店铺授权码：</div>
        <div class="value">{{ orderItem.authCode }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">店主姓名：</div>
        <div class="value">{{ orderItem.shopOwnerName }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">店主手机号：</div>
        <div class="value">{{ orderItem.shopOwnerPhone }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">大区名称：</div>
        <div class="value">{{ orderItem.warzoneName }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">营销区域名称：</div>
        <div class="value">{{ orderItem.baseName }}</div>
      </div>
      <div class="proprietary-order-detail__content--item" style="grid-column: 3/5">
        <div class="label">店铺地址：</div>
        <div class="value">{{ orderItem.storeAddress }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">会员姓名：</div>
        <div class="value">{{ orderItem.memberName }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">会员手机号：</div>
        <div class="value">{{ orderItem.memberPhone }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">收货人姓名：</div>
        <div class="value">{{ orderItem.postPerson }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">收货人电话：</div>
        <div class="value">{{ orderItem.postPersonTel }}</div>
      </div>
      <div class="proprietary-order-detail__content--item" style="grid-column: 1/3">
        <div class="label">收货地址：</div>
        <div class="value">{{ orderItem.postAddress }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">是否包含限购品：</div>
        <div class="value">{{ orderItem.haveBuyLimitName }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">是否包含赠品：</div>
        <div class="value">{{ orderItem.haveGiftOrderName }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">是否包含宴席信息：</div>
        <div class="value">{{ orderItem.isFeastOrder }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">付款时间：</div>
        <div class="value">{{ orderItem.payTime }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">配送方式：</div>
        <div class="value">{{ orderItem.deliveryMethodName }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">发货时间：</div>
        <div class="value">{{ orderItem.deliveryTime }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">退款时间：</div>
        <div class="value">{{ orderItem.refundDate }}</div>
      </div>
      <div class="proprietary-order-detail__content--item">
        <div class="label">订单完成时间：</div>
        <div class="value">{{ orderItem.completeDate }}</div>
      </div>
    </div>

    <!--支付列表-->
    <el-divider content-position="left">订单支付信息</el-divider>
    <div class="proprietary-order-detail__payment-table">
      <el-table tooltip-effect="dark" style="width: 100%" border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :data="payData">
        <el-table-column label="支付类型" align="center" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.payMethod == 0">云店线下</span>
            <span v-if="scope.row.payMethod == 1">线上支付</span>
            <span v-if="scope.row.payMethod == 2">pos线下支付</span>
            <span v-if="scope.row.payMethod == 3">微信</span>
            <span v-if="scope.row.payMethod == 4">支付宝</span>
            <span v-if="scope.row.payMethod == 5">银行卡</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalMoney" label="订单原价" align="center" width="120" :formatter="fixData" />
        <el-table-column prop="couponType" label="通用券类型" align="center" width="120" :formatter="couponType" />
        <el-table-column prop="couponDeductMoney" label="通用券抵扣金额" align="center" width="120" :formatter="fixData" />
        <el-table-column prop="discountMoney" label="定向券抵扣金额" align="center" width="120" :formatter="fixData" />
        <el-table-column prop="payMoney" label="订单实付金额" align="center" width="120" :formatter="fixData" />
        <el-table-column prop="payTime" label="支付时间" align="center" width="200" show-overflow-tooltip />
        <el-table-column prop="payStatus" label="支付状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.payStatus == 0 && orderItem.returnStatus == 0">待支付</span>
            <span v-if="scope.row.payStatus == 1 && orderItem.returnStatus == 0">已支付</span>
            <span v-if="orderItem.returnStatus != 0">已退款</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--商品列表-->
    <el-divider content-position="left">订单商品信息</el-divider>
    <div class="proprietary-order-detail__item-data">
      <el-table tooltip-effect="dark" style="width: 100%" border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :data="itemData">
        <el-table-column prop="goodsSeq" label="商品编号" align="center" show-overflow-tooltip />
        <el-table-column prop="goodsName" label="商品名称" align="center" show-overflow-tooltip />
        <el-table-column prop="goodsStyle" label="商品类型" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.goodsStyle == 1">普通商品</span>
            <span v-if="scope.row.goodsStyle == 2">宴席商品</span>
            <span v-if="scope.row.goodsStyle == 3">生日专属商品</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsPic" label="商品图片" align="center" width="120">
          <template slot-scope="scope">
            <img :src="scope.row.goodsPic" v-if="scope.row.goodsPic != '' && scope.row.goodsPic != null" width="70"
              height="50" />
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="购买数量" align="center" width="120" />
        <el-table-column prop="minAmount" label="折算瓶数" align="center" width="120" />
        <el-table-column prop="oldMoney" label="商品原价" align="center" width="120" :formatter="fixData" />
        <el-table-column prop="memberMoney" label="商品会员价" align="center" width="120" :formatter="fixData" />
        <!-- v-if="orderItem.returnStatus == 0" -->
        <el-table-column prop="realMoney" label="商品实付金额" align="center" width="120" :formatter="fixData" />
        <!-- v-if="orderItem.returnStatus != 0" -->
        <el-table-column prop="realMoney" label="退款金额" align="center" width="120" :formatter="fixData" />
      </el-table>
    </div>

    <template v-if="orderItem.buyerNote">
      <el-divider content-position="left">备注信息</el-divider>
      <div class="proprietary-order-detail__remark-data">{{ orderItem.buyerNote }}</div>
    </template>

    <!--退款商品列表-->
    <template v-if="orderItem.returnStatus != 0">
      <el-divider content-position="left">退款信息</el-divider>
      <div class="proprietary-order-detail__return-data">
        <el-table tooltip-effect="dark" style="width: 800px" border
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :data="returnData">
          <el-table-column prop="orderNo" label="退款单编号" align="center" width="200" />
          <el-table-column prop="goodsName" label="退款商品名称" align="center" show-overflow-tooltip />
          <el-table-column prop="orderTime" label="退款时间" align="center" width="200" show-overflow-tooltip />
          <el-table-column prop="realMoney" label="退款金额" align="center" width="120" :formatter="fixData" />
        </el-table>
      </div>
    </template>

    <!-- 物流列表 -->
    <!-- <template v-if="orderItem.returnStatus == 0">
      <el-divider content-position="left">物流信息</el-divider>
      <el-button type="primary" size="mini" @click="queryTradeOrderDeliverList">点击查询物流详情</el-button>
      <template v-if="deliverData.company">
        <div class="proprietary-order-detail__deliver-data">
          <div class="proprietary-order-detail__content--item">
            <div class="label">快递公司：</div>
            <div class="value">{{ deliverData.company }}</div>
          </div>

          <div class="proprietary-order-detail__content--item">
            <div class="label">快递单号：</div>
            <div class="value">{{ deliverData.no }}</div>
          </div>
        </div>

        <div class="proprietary-order-detail__deliver-time">
          <div class="proprietary-order-detail__deliver-time--header">物流详情</div>
          <template v-if="deliverData.lists && deliverData.lists.length > 0">
            <el-timeline :reverse="true">
              <el-timeline-item v-for="(item, index) in deliverData.lists" :key="index" :timestamp="item.datetime"
                type="primary">
                {{ item.remark }}
              </el-timeline-item>
            </el-timeline>
          </template>
          <div v-else class="proprietary-order-detail__deliver-time--empty">暂无物流信息</div>
        </div>
      </template>
    </template> -->
    <el-divider content-position="left" v-if="orderItem.returnStatus == 0"
      >物流信息</el-divider
    >
    <div class="table5" v-if="orderItem.returnStatus == 0">
      <el-table
        ref="table5"
        key="table5"
        tooltip-effect="dark"
        style="width: 800px"
        v-loading="loading5"
        :data="deliverData"
        border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column
          prop="deliveryTypeName"
          label="配送方式"
          align="center"
        ></el-table-column>
        <el-table-column prop="userName" label="业务员名称" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.deliveryType != 2">—</span>
            <span v-if="scope.row.deliveryType == 2">{{
              scope.row.userName
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="companyName" label="快递名称" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.deliveryType != 3">—</span>
            <span v-if="scope.row.deliveryType == 3">{{
              scope.row.companyName
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="nu" label="快递单号" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.deliveryType != 3">—</span>
            <span v-if="scope.row.deliveryType == 3">
              <el-button
                size="mini"
                @click="showDeliverDetail(scope.row)"
                type="text"
                >{{ scope.row.nu }}</el-button
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column type="expand" width="1">
          <template slot-scope="scope">
            <div id="deliverDetail">
              <div style="margin:0 10px 10px 0">物流详细</div>
              <div>
                <iframe
                  :src="
                    'https://www.kuaidi100.com/chaxun?com=' +
                      scope.row.com +
                      '&nu=' +
                      scope.row.nu
                  "
                  style="width:100%;height:500px"
                  frameborder="0"
                  name="快递详细"
                  scrolling="auto"
                ></iframe>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderItem: {
        orderNo: '',
        orderStatusName: '',
        orderTime: '',
        orderSource: '',
        storeName: '',
        authCode: '',
        shopOwnerName: '',
        shopOwnerPhone: '',
        warzoneName: '',
        baseName: '',
        storeAddress: '',
        memberName: '',
        memberPhone: '',
        postPerson: '',
        postPersonTel: '',
        postAddress: '',
        haveBuyLimitName: '',
        haveGiftOrderName: '',
        isFeastOrder: '',
        payTime: '',
        deliveryMethodName: '',
        deliveryTime: '',
        refundDate: '',
        completeDate: '',
      },
      orderId: '',
      payData: [],
      itemData: [],
      returnData: [],
      deliverData: [],
    }
  },
  methods: {
    //数字格式化
    fixData(row, column, cellValue, index) {
      if (cellValue != null && !isNaN(cellValue)) {
        if (cellValue < 0) {
          return '0.00';
        } else {
          return cellValue.toFixed(2);
        }
      } else {
        return '—';
      }
    },
    //卡券类型格式化
    couponType(row, column, cellValue, index) {
      if (row.couponId != null && row.couponId != '') {
        return '通用券';
      } else {
        return '—';
      }
    },
    showDeliverDetail(row) {
      let $table = this.$refs.table5;
      this.deliverData.map((item) => {
        if (row.goodsId != item.goodsId) {
          $table.toggleRowExpansion(item, false);
          item.expansion = false;
        } else {
          item.expansion = !item.expansion;
        }
      });
      $table.toggleRowExpansion(row);
    }
  }
}
</script>

<style lang="scss" scoped>
.proprietary-order-detail {
  &__header {
    display: flex;
    align-self: center;
    justify-content: space-between;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #dcdfe6;
    overflow: hidden;

    &--title {
      color: #2b7dbc;
      font-size: 16px;
    }
  }

  &__content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px 10px;
    margin-top: 15px;

    &--item {
      display: flex;
      align-items: center;
      width: 100%;
      height: 32px;
      color: #606266;
      font-size: 14px;

      .label {
        width: 128px;
        text-align: right;
      }

      .value {
        flex: 1;
        height: 32px;
        line-height: 32px;
        padding: 0 10px;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
      }
    }
  }
}
</style>